<template>
  <view class="root">
    <view class="header">
      <view class="amount relative ai-center jc-start">
        <image
          mode="aspectFit"
          class="absolute top-0 width-100percent height-100percent"
          src="/static/images/bg-home.png"
        />
        <text class="fs-20 color-fff">今日收益(元)</text>
        <text class="fs-50 color-fff fw-700">
          {{ pageData.profit_today.toFixed(2) }}
        </text>
      </view>

      <view class="fd-row ai-center pt-40 pb-40">
        <view
          v-for="(item, index) in summary"
          :key="item.name"
          :class="[{ line: index }, 'f1', 'color-fff', 'fw-500', 'ai-center']"
        >
          <text class="fs-24">{{ item.title }}</text>
          <text class="fs-36">{{ item.number }}</text>
        </view>
      </view>
    </view>

    <view class="gzh">
      <text class="f1 pl-16 pr-16 color-303133 fs-28">公众号</text>
      <text v-if="binding == ''" class="fs-28" style="color: red" @click="skip"
        >请绑定</text
      >
      <text v-else class="fs-28" style="color: red">已绑定</text>
      <image
        class="width-10 height-18 ml-12"
        src="/static/images/icon-toRight.png"
        mode="aspectFit"
      />
    </view>

    <view class="fd-row ai-center jc-sa bgc-fff">
      <navigator
        v-for="(item, index) in orders"
        :key="index"
        :url="`/pages/${item.url}`"
        :open-type="item.openType || 'navigate'"
        class="ai-center pt-30 pb-30"
      >
        <image
          class="width-58 height-58"
          :src="`/static/images/icon-${item.name}.png`"
          mode="aspectFit"
        />
        <text class="fs-24 color-333 lh-2">{{ item.text }}</text>
      </navigator>
    </view>

    <view class="bgc-fff mt-20">
      <text class="fs-30 text-center lh-3">
        {{ pageData.list_working.length ? "进行中..." : "暂无进行中的订单" }}
      </text>

      <view
        v-for="(order, orderIndex) in pageData.list_working"
        :key="orderIndex"
        class="content br-10"
      >
        <view class="fd-row ai-center ml-30 mr-30 mt-12">
          <image
            class="width-80 height-80 br-circle"
            :src="order.avatarUrl || '/static/images/default-avatar.png'"
            mode="aspectFill"
          />
          <view class="f1 ml-12">
            <text class="fs-28 color-1b1b1b">
              {{ order.userName }}
            </text>
            <text class="fs-22 color-999">
              下单时间：{{ order.add_time }}
            </text>
          </view>
          <image
            @click="callPhone(order.phoneNumber)"
            class="width-54 height-54"
            src="/static/images/icon-call.png"
            mode="aspectFit"
          />
        </view>
        <view class="service fd-row mt-10 bgc-f7f7f7">
          <image
            class="bgc-eee cover br-10"
            :src="order.cover"
            mode="aspectFill"
          />

          <view class="f1 ml-24">
            <text class="color-1b1b1b fs-30">
              {{ order.storeName }}
            </text>
            <text class="color-999 fs-24"> 服务项目：{{ order.items }} </text>
            <text class="color-999 fs-24"> 数量：x{{ order.item_count }} </text>
            <text class="color-ff4a5b fs-24"> ￥{{ order.total_money }} </text>
          </view>
        </view>
        <view class="color-666 fs-24 ml-30 mr-30 lh-2 mt-12">
          <text>订单编号：{{ order.sn }}</text>
          <text>车牌：{{ order.numberPlate }}</text>
          <text>车型：{{ order.color + " " + order.carType }}</text>
          <text>地址：{{ order.address }}</text>
        </view>

        <view class="fd-row ai-center jc-sb ml-30 mr-30 pt-24 pb-30">
          <view
            v-for="(service, serviceIndex) in services"
            :key="service.name"
            hover-class="tap-hover"
            @click="
              operation(
                orderIndex,
                service.name,
                serviceIndex !== order.deal_status
              )
            "
            :class="[
              {
                active: serviceIndex === order.deal_status,
              },
              'service-status',
            ]"
          >
            <image
              class="width-60 height-60"
              :src="`/static/images/icon-${service.name}.png`"
              mode="aspectFit"
            />
            <text>
              {{ service.text }}
            </text>
          </view>
          <button
            class="btn-complete fs-24 lh-2 ml-0 mr-0"
            :disabled="order.deal_status !== 3"
            @click="operation(orderIndex, 'finish', order.deal_status !== 3)"
          >
            完成
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class home extends Vue {
  // component property
  //   userInfo: AnyObject = {};
  binding = "";
  orders: AnyObject[] = [
    { name: "allOrder", url: "home/order?type=0", text: "全部订单" },
    {
      name: "orderIncome",
      url: "tabs/income",
      text: "订单收益",
      openType: "switchTab",
    },
    { name: "pendingOrder", url: "home/order?type=1", text: "待完成订单" },
    { name: "source", url: "home/informationSource", text: "信息源" },
  ];

  services: AnyObject[] = [
    { name: "arrived", text: "我已到达" },
    { name: "camera", text: "拍照检查" },
    { name: "start", text: "开始服务" },
  ];

  pageData: AnyObject = {
    orders: {},
    profit_today: 0,
    list_working: [],
  };

  public get summary(): AnyObject[] {
    return [
      {
        name: "orderNumber",
        title: "订单总数",
        number: this.pageData.orders.all,
      },
      {
        name: "numberOfPeople",
        title: "今日订单数",
        number: this.pageData.orders.today,
      },
      {
        name: "cardNumber",
        title: "会员订单数",
        number: this.pageData.orders.today_vip,
      },
    ];
  }

  onShow() {
    this.getData();
    this.request.get("/employee/user_info").then(({ data }) => {
      this.binding = data.mp_openid;
    });
  }
  skip() {
    uni.navigateTo({
      url: "/pages/home/spread",
    });
  }
  onPullDownRefresh() {
    this.getData();
  }

  getData() {
    this.request
      .get("/employee/index")
      .then(({ data }) => {
        this.pageData = data;
      })
      .finally(uni.stopPullDownRefresh);
  }

  callPhone(phoneNumber: string) {
    uni.makePhoneCall({ phoneNumber });
  }

  operation(index: number, name: string, stop: boolean) {
    console.log(index, name, stop);
    if (stop) return;

    const { order_id } = this.pageData.list_working[index];
    switch (name) {
      case "arrived":
        this.request
          .get("/employee/changeOrderStatus", {
            order_id,
            status: 1,
          })
          .then(({ msg: title }) => {
            uni.showToast({ title });
            this.pageData.list_working[index].deal_status++;
            this.$forceUpdate();
          });
        break;
      case "camera":
        uni.navigateTo({
          url: `/pages/home/submitInformation?type=check&order_id=${order_id}`,
        });
        break;
      case "start":
        this.request
          .get("/employee/changeOrderStatus", {
            order_id,
            status: 3,
          })
          .then(({ msg: title }) => {
            uni.showToast({ title });
            this.pageData.list_working[index].deal_status++;
            this.$forceUpdate();
          });
        break;
      case "finish":
        uni.navigateTo({
          url: `/pages/home/submitInformation?type=finish&order_id=${order_id}`,
        });
        break;
      default:
        break;
    }
  }
}
</script>

<style lang="scss" scoped>
.gzh {
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 0 20rpx;
  line-height: 80rpx;
}
// scss
.root {
  .header {
    background-image: linear-gradient(-90deg, #1ba0ff, #2857ff);
    .amount {
      margin: 130rpx auto 40rpx;
      padding: 0 60rpx 100rpx;
    }
    .line {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2rpx;
        height: 30rpx;
        background: #fff;
        opacity: 0.2;
      }
    }
  }
  .content {
    margin: 0 30rpx 30rpx;
    box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.1);
    .service {
      padding: 20rpx 30rpx;
      .cover {
        width: 145rpx;
        height: 145rpx;
      }
    }
    .service-status {
      position: relative;
      align-items: center;
      color: #666;
      filter: opacity(60%);
      font-size: 20rpx;
      line-height: 2;
      &.active {
        filter: opacity(100%);
        color: #1b1b1b;
      }
      &::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 30rpx;
        width: 77rpx;
        border-top: 1rpx dashed #bfbfbf;
      }
    }
    .btn-complete {
      transform: translateY(-20rpx);
    }
  }
}
</style>